<template>
    <h1 style="margin-left: 170px;font-size:1.8em;">团课预约设置</h1>

    <!-预约开始时间-->
    <div class="container">
        <div class="component">
            <h1 class="tooltip-left">预约开始时间</h1>
            <div class="tooltip-right">


                <div class="mb-2 ml-4">
                    <el-radio-group 
                        v-model="radio1"
                        style="display: flex;
                        flex-flow: column nowrap;
                        align-items: flex-start;">

                        <el-radio value="1" size="large">不限制会员可提前预约的天数!</el-radio>
                        <el-radio value="2" size="large">
                            会员最多可以提前预约的天数 :
                            <el-input v-model="input_1" style="width: 240px; margin-left: 20px;" placeholder="1" />
                        </el-radio>
                    </el-radio-group>
                </div>
                
            </div>
        </div>
    </div>


    <div class="container">
        <div class="component">
            <h1 class="tooltip-left">预约截止时间</h1>
            <div class="tooltip-right">

                <div class="mb-2 ml-4">
                    
                    <el-radio-group 
                    v-model="radio2"
                    style="display: flex;
                        flex-flow: column nowrap;
                        align-items: flex-start;">

                        <el-radio value="1" size="large">任何时间均可以预约!</el-radio>
                        <el-radio value="2" size="large">
                            预约截止时间: 上课前
                            <el-input v-model="input_2" style="width: 40px; margin-left: 5px;" placeholder="1" />
                            小时
                        </el-radio>
                        <el-radio value="3" size="large">
                            预约截止时间: 上课前
                            <el-input v-model="input_3" style="width: 40px; margin-left: 5px;" placeholder="1" />
                            天的
                            <el-time-select
                                v-model="value1"
                                style="width: 240px"
                                start="08:30"
                                step="00:15"
                                end="18:30"
                                placeholder="Select time"
                            />
                        </el-radio>
                    </el-radio-group>
                </div>
            </div>
        </div>
    </div>


    <div class="container">
        <div class="component">
            <h1 class="tooltip-left">取消预约时间</h1>
            <div class="tooltip-right">

                <div class="mb-2 ml-4">
                    
                    <el-radio-group 
                    v-model="radio3"
                    style="display: flex;
                        flex-flow: column nowrap;
                        align-items: flex-start;">

                        <el-radio value="1" size="large">任何时间均可以取消!</el-radio>
                        <el-radio value="2" size="large">
                            取消预约截至时间: 上课前
                            <el-input v-model="input_4" style="width: 40px; margin-left: 5px;" placeholder="1" />
                            小时
                        </el-radio>
                        <el-radio value="3" size="large">
                            取消预约截止时间: 上课前
                            <el-input v-model="input_5" style="width: 40px; margin-left: 5px;" placeholder="1" />
                            天的
                            <el-time-select
                                v-model="value2"
                                style="width: 240px"
                                start="08:30"
                                step="00:15"
                                end="18:30"
                                placeholder="Select time"
                            />
                        </el-radio>
                    </el-radio-group>
                </div>
            </div>
        </div>
    </div>

    <!--保存按钮-->
    <div class="container">
        <div class="button">
            <el-button type="primary"@click='clickbutton()'>保存</el-button>
        </div>
    
    </div>

</template>

<script setup>
import { ref,reactive} from 'vue'
import { getCourseList } from '@/api/course.js'

//表单单选框三个判断值
const radio1 = ref('1')
const radio2 = ref('1')
const radio3 = ref('1')
//表单单选框三个判断值###

//时间选择器属性
const value1 = ref(null)
const value2 = ref(null)
//时间选择器属性##

//表单输入框属性
const input_1 = ref('')
const input_2 = ref('')
const input_3 = ref('')
const input_4 = ref('')
const input_5 = ref('')
//表单输入框属性##


//表单组件属性
const courseReservation=reactive({
    startDay: 1,
    endDay: 7,
    endTime: "23:59",
    endHour: 23,
    cancelDay: 3,
    cancelTime: "12:00",
    cancelHour: 12,
    appointmentStartMode: 1,
    appointmentDeadlineMode: 2,
    appointmentCancelMode: 3
})
//表单组件属性##


//按钮触发事件
const clickbutton=()=>{
    //判断输入,传入reactive对象
    if(radio1.value=='2'){
        courseReservation.startDay=input_1.value
    }
    if(radio2.value=='2'){
        courseReservation.endHour=input_2.value
    }
    if(radio2.value=='3'){
        courseReservation.endDay=input_3.value
        courseReservation.endTime=value1.value
    }
    if(radio3.value=='2'){
        courseReservation.cancelHour=input_4.value
    }
    if(radio3.value=='3'){
        courseReservation.cancelDay=input_5.value
        courseReservation.cancelTime=value2.value
    }
    courseReservation.appointmentStartMode=radio1.value,
    courseReservation.appointmentDeadlineMode=radio2.value,
    courseReservation.appointmentStartMode=radio3.value

    //判断输入,传入reactive对象##


        getCourseList(courseReservation).then(res => {
            if(res.data.code==200){
                alert("保存成功")
            }
        }).catch(error=>{
              //输出报错信息
              console.log("Error information:", error);
              if (error.response.status === 401) {
                alert('登录已过期，请重新登录');
                //删除token
                localStorage.removeItem("token")
                router.push("/login")
              }
              else{alert("未知错误,报错信息不为401")}
          })

}
//按钮触发事件##


</script>

<style scoped>

.container {
  display: flex;
  flex-direction: column; /* 垂直排列 */
  align-items: flex-start; /* 左对齐 */
  margin-left: 270px;
  margin-top: 40px;
}

.component {
  position: relative;
  display: flex;
  align-items: center; /* 垂直居中 */
  
}

.tooltip-left {
  margin-right: 10px; /* 调整间距 */
}

.tooltip-right {
  margin-left: 10px; /* 调整间距 */
  display: flex;
  flex-direction: column; /* 修改为垂直排列 */
}

.button{
    margin-left: 270px;
}
</style>